<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="70px">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入企业名称" />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-button type="primary" @click="loadData">搜索</el-button>
          <el-button @click="searchResetForm('form')">重 置</el-button>

        </el-col>
      </el-row>
    </el-form>

    <div style="margin-bottom: 20px;">
      <el-button type="primary" size="small" @click="add">添加</el-button>
    </div>
    <Column :columns="columnLists" :rows="tableData" :loading="loading" :type="type" @selectionChange="selectionChange" @del="del" @changeState="changeState" @edit="edit" />

    <Pagination :total="total" :current-page="pageNum" :page-size="pageSize" @handleChange="handleChange" />

    <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="dialogVisible" width="45%">
      <el-form ref="formLabelAlign" :model="formLabelAlign" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="企业名称" prop="name">
              <el-input v-model="formLabelAlign.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="企业代码" prop="code">
              <el-input v-model="formLabelAlign.code" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="formLabelAlign.phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="formLabelAlign.email" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="企业地址" prop="address">
              <el-input
                v-model="formLabelAlign.address"
                clearable
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请输入企业地址"
                style="resize:none;"
              />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="save('formLabelAlign')">确 定</el-button>
        <el-button size="mini" @click="resetForm('formLabelAlign')">重 置</el-button>
        <el-button size="mini" type="danger" @click="cancel('formLabelAlign')">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { showData, deleteData, resetForm, validate, fileToBase64, success, fail, delData } from '@/api/common'
import Pagination from '@/components/Pagination'
import Column from '@/components/Column'
import { lists, save } from '@/api/requestCommon'

export default {
  name: 'PagePermission',
  components: {
    Pagination,
    Column
  },
  data() {
    return {

      pageNum: 1, pageSize: 10, total: 0,
      form: { name: '' },
      tableData: [],
      selectRows: [],
      dialogVisible: false,
      title: '添加企业',
      editId: '',
      columnLists: [
        { prop: 'name', label: '企业名称' },
        { prop: 'code', label: '企业代码' },
        { prop: 'phone', label: '手机号码' },
        { prop: 'email', label: '电子邮箱' },
        { prop: 'createTime', label: '创建时间' },
        { prop: 'updateTime', label: '修改时间' }
      ],
      type: 'company',
      rules: {
        code: [
          { required: true, message: '请输入企业代码', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入企业名称', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'change' }
        ]
      },
      formLabelAlign: {
        id: '',
        code: '',
        name: '',
        email: '',
        phone: '',
        address: ''
      },

      loading: true

    }
  },
  created() {

  },
  mounted() {
    this.loadData()
  },
  methods: {

    selectionChange(rows) {
      this.selectRows = rows
    },
    loadData() {
      debugger
      this.form.pageNum = this.pageNum
      this.form.pageSize = this.pageSize
      lists(this.type, this.form).then(response => {
        this.loading = false
        debugger
        if (response.code === 200) {
          showData(response, this)
        } else {
          fail(response.msg)
        }
      })
    },
    searchResetForm(formName) {
      resetForm(this, formName)
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.loadData()
    },
    handleChange(pageNum, pageSize) {
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.loadData()
    },
    del(index) {
      delData(this.type, this.tableData[index].id, this)
    },
    edit(index) {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.formLabelAlign = Object.assign({}, this.tableData[index])
      })
    },
    save(formName) {
      if (validate(this, formName)) {
        this.formLabelAlign.pid = 0
        save(this.type, this.formLabelAlign).then(response => {
          if (response.code === 200) {
            success(response.msg)
            this.dialogVisible = false
            this.loadData()
            resetForm(this, formName)
          } else {
            fail(response.msg)
          }
        })
      }
    },
    resetForm(formName) {
      resetForm(this, formName)
    },
    cancel(formName) {
      resetForm(this, formName)
      this.dialogVisible = false
    },
    add() {
      this.dialogVisible = true
      this.title = '添加企业信息'
    }

  }
}
</script>

<style scoped>

</style>
